<!--  -->
<template>
  <view
    :class="['c-tag', `c-tag--${type}`, border ? `c-tag--${type}--border` : '']"
    @click="$emit('click')"
  >
    {{ text }}
  </view>
</template>

<script lang="ts" setup>
  defineProps({
    text: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: 'primary',
    },
    border: {
      type: Boolean,
      default: false,
    },
  });
  defineEmits(['click']);
</script>

<style lang="scss" scoped>
  .c-tag {
    padding: 6rpx 12rpx;
    font-size: 26rpx;
    border-radius: 8rpx;
    display: inline-block;
    &--primary {
      color: #ff7100;
      background: #ffebd0;
      &--border {
        border: 1rpx solid #ff7100;
      }
    }
    &--default {
      color: rgba(62, 70, 84, 0.7);
      background: rgba(62, 70, 84, 0.09);
      &--border {
        border: 2rpx solid rgba(62, 70, 84, 0.7);
      }
    }
    &--green {
      color: #09b25f;
      background: rgba(9, 178, 95, 0.1);
      &--border {
        border: 2rpx solid #09b25f;
      }
    }
    &--blue {
      color: #3190fe;
      background: #eaf7ff;
      &--border {
        border: 2rpx solid #3190fe;
      }
    }
  }
</style>
